<template>
  <div>
    <div v-if="model" class="model_wrap">
      <slot />
    </div>
    <div v-if="model" class="shade" @click="close" />
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Boolean,
      required: true
    }
  },
  computed: {
    model: {
      get() {
        console.log(this.value)
        return this.value
      },
      set(newValue) {
        this.$emit('input', newValue)
      }
    }
  },
  methods: {
    close() {
      this.$emit('input', false)
    }
  }
}
</script>

<style lang="scss" scoped>
.shade {
  z-index: 9999;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: #000000;
  opacity: .4 ;
}
.model_wrap {
  display: flex;
  position: fixed;
  z-index: 99999;
  top: 42%;
  left: 50%;
  border-radius: 8px;
  transform: translate(-50%, -50%);
  background-color: #fff;
}
</style>
